<caltech-header title="Calibration PO" page="pageCount">
    <h3>CALIBRATION PO</h3>
    <h5 ng-show="model.poNumber">
        <p>PO No. {{model.poNumber}} - Date: {{model.poDate | date: 'dd/MMM/yyyy'}}</p>
        <div class="visible-print">Quote #: {{model.quoteNumber}}</div>
    </h5>
</caltech-header>

<div class="page-quote-item">
    <div class="row">
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-3">
                    <label>Customer:</label>
                </div>
                <div class="col-xs-9">
                    <span class="form-control-static">{{model.company.name}}</span>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-3">
                    <label>Address:</label>
                </div>
                <div class="col-xs-9">
                    <span class="form-control-static">
                        {{model.company.address}}
                        <span ng-if="model.company.city">, {{model.company.city}}</span>
                        <span ng-if="model.company.state">, {{model.company.state}}</span>
                        <span ng-if="model.company.country">, {{model.company.country}}</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="col-xs-5">
            <div class="row hidden-print">
                <div class="col-xs-3">
                    <label>Quote #:</label>
                </div>
                <div class="col-xs-9">
                    <span e-typeahead="item as item.quoteNumber for item in getQuoteList($viewValue)" e-typeahead-editable="false"
                        onaftersave="updateEquipment($data)" editable-text="model.quoteNumber" buttons="no" blur="submit"><strong>{{model.quoteNumber}}</strong></span>
                </div>
            </div>

            <div class="row hidden-print">
                <div class="col-xs-3">
                    <label>PO date:</label>
                </div>
                <div class="col-xs-9">
                    <a href="#" e-datepicker-popup="dd/MMM/yyyy" e-class="form-control" editable-bsdate="model.poDate" buttons="no" blur="submit">{{model.poDate | date: 'dd/MMM/yyyy'}}</a>
                </div>
            </div>

            <div class="row visible-print">
                <div class="col-xs-12">
                    <strong>KIM LONG SURVEY JSC (KLC)</strong>
                    <div><small>86 Xuan Thuy St, Thao Dien Ward, Dist. 2, HCM City, VN</small></div>
                    <div>
                        <small>Tel: +84 (8) 6281.8479 - Fax: +84 (8) 6281.8481</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-3">
                    <label>Contact:</label>
                </div>
                <div class="col-xs-9">
                    <span class="form-control-static">{{model.company.contactPersonName}}</span>
                </div>
            </div>
        </div>
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-3">
                    <label>Sales man:</label>
                </div>
                <div class="col-xs-9">
                    <span class="form-control-static">{{model.salesman.fullName}}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-3">
                    <label>Phone:</label>
                </div>
                <div class="col-xs-9">
                    <span class="form-control-static">{{model.company.tel}}</span>
                </div>
            </div>
        </div>
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-3">
                    <label>Phone:</label>
                </div>
                <div class="col-xs-9">
                    <span class="form-control-static">{{model.salesman.tel}}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-3">
                    <label>Mobile:</label>
                </div>
                <div class="col-xs-9">
                    <span class="form-control-static">{{model.company.mobile}}</span>
                </div>
            </div>
        </div>
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-3">
                    <label>Mobile:</label>
                </div>
                <div class="col-xs-9">
                    <span class="form-control-static">{{model.salesman.mobile}}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-3">
                    <label>Email:</label>
                </div>
                <div class="col-xs-9">
                    <span class="form-control-static">{{model.company.email}}</span>
                </div>
            </div>
        </div>
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-3">
                    <label>Email:</label>
                </div>
                <div class="col-xs-9">
                    <span class="form-control-static">{{model.salesman.email}}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<table class="table">
    <thead>
        <tr>
            <th class="col-xs-1 hidden-print">#</th>
            <th class="visible-print" style="width: 1%;">#</th>
            <th class="col-xs-2">Description</th>
            <th class="col-xs-2">Manufacturer</th>
            <th class="col-xs-2">Model</th>
            <th class="col-xs-2">Range</th>
            <th class="col-xs-1">Service at</th>
            <th class="col-xs-1 text-center quantity">Qty</th>
            <th class="col-xs-1 text-right col-min-print">Unit Price</th>
            <th class="col-xs-1 text-right">Amount</th>
            <th class="col-xs-1 hidden-print"></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in model.items">
            <td class="visible-print">
                <span class="form-control-static">{{$index + 1}}</span>
            </td>
            <td class="hidden-print">
                <span ng-disabled="!model.company.id" style="overflow: hidden; text-overflow: ellipsis;" title="{{item.poNumber}}" e-typeahead-editable="false" e-typeahead-on-select="updateQuoteItem($item, item)" e-typeahead="equipment as equipment.name for equipment in getEquipmentList($viewValue)"
                    editable-text="item.poNumber" e-name="poNumber" e-form="rowform" class="form-control-static">{{item.poNumber}}
                </span>
            </td>
            <td>
                <span editable-text="item.name" e-name="description" title="{{item.name}}" e-form="rowform" e-required class="form-control-static">{{item.name}}
                </span>
            </td>
            <td>
                <span editable-text="item.manufacturer" e-name="manufacturer" e-form="rowform" e-required class="form-control-static">{{item.manufacturer}}
                </span>
            </td>
            <td>
                <span editable-text="item.modelNumber" e-name="model" e-form="rowform" e-required class="form-control-static">{{item.modelNumber}}
                </span>
            </td>
            <td>
                <span editable-text="item.description" e-name="model" e-form="rowform" e-required class="form-control-static">{{item.description}}
                </span>
            </td>
            <td>
                <span editable-select="item.servicePlace" e-name="servicePlace" e-form="rowform" e-ng-options="s.value as s.text for s in servicePlaces" e-required class="form-control-static">{{showServicePlaces(item.servicePlace)}}
                </span>
            </td>
            <td>
                <span editable-number="item.quantity" e-name="quantity" e-form="rowform" e-min="1" e-required class="text-center form-control-static" e-class="text-center">{{item.quantity | number}}
                </span>
            </td>
            <td>
                <span editable-number="item.unitPrice" e-name="unitPrice" e-form="rowform" e-min="0" e-required class="text-right form-control-static" e-class="text-right">{{item.unitPrice | number}}
                </span>
            </td>
            <td>
                <span class="form-control-static text-right">{{(item.unitPrice * item.quantity) | number}}</span>
            </td>
            <td class="hidden-print text-right" style="white-space:nowrap;">
                <form editable-form name="rowform" onbeforesave="saveUser($data, user.id)" ng-show="rowform.$visible" class="form-buttons form-inline">
                    <button type="submit" ng-disabled="rowform.$waiting || rowform.$invalid" class="btn btn-primary btn-sm"><b class="glyphicon glyphicon-ok"></b></button>
                    <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default btn-sm"><b class="glyphicon glyphicon-remove"></b></button>
                </form>
                <button ng-show="!rowform.$visible" class="btn btn-primary btn-sm" ng-click="rowform.$show()"><b class="glyphicon glyphicon-edit"></b></button>
                <button class="btn btn-danger btn-sm" ng-click="removeRow($index)"><b class="glyphicon glyphicon-trash"></b></button>
            </td>
        </tr>
        <tr class="hidden-print" ng-show="model.company.id">
            <td>
                <input form="newRowForm" name="poNumber" ng-model="newRow.poNumber" type="text" class="form-control"
                    typeahead-editable="false" typeahead-on-select="updatePoItem($item, newRow)" typeahead="equipment as equipment.searchKeyEquipment for equipment in getEquipmentList($viewValue)" />
            </td>
            <td><span class="form-control-static">{{newRow.name}}</span></td>
            <td><span class="form-control-static">{{newRow.manufacturer}}</span></td>
            <td><span class="form-control-static">{{newRow.modelNumber}}</span></td>
            <td>
                <select form="newRowForm" name="servicePlace" ng-options="s.value as s.text for s in servicePlaces" class="editable-input form-control ng-pristine ng-valid" ng-model="newRow.servicePlace" required>
                    {{showServicePlaces(newRow.servicePlace)}}
                </select>
            </td>
            <td>
                <input form="newRowForm" name="quantity" ng-model="newRow.quantity" min="1" type="number" class="form-control text-center" required /></td>
            <td>
                <input form="newRowForm" name="unitPrice" ng-model="newRow.unitPrice" min="0" type="number" class="form-control text-right" required /></td>
            <td><span class="form-control-static text-right">{{(newRow.unitPrice * newRow.quantity) | number}}</span></td>
            <td class="text-right">
                <form name="newRowForm" id="newRowForm" novalidate>
                    <input form="newRowForm" name="modelNumber" ng-model="newRow.modelNumber" hidden type="text" class="form-control" required />
                    <input form="newRowForm" name="quantity" ng-model="newRow.quantity" type="number" min="1" hidden class="form-control" required />
                    <input form="newRowForm" name="unitPrice" ng-model="newRow.unitPrice" type="number" min="0" hidden class="form-control" required />
                    <button class="btn btn-primary btn-sm" ng-click="addRow(newRow)" ng-disabled="newRowForm.$invalid"><b class="glyphicon glyphicon-plus"></b></button>
                </form>
            </td>
        </tr>
        <tr>
            <td colspan="8" class="text-right"><strong class="form-control-static">Transportation/Shipping/Delivery/Onsite Service Charges</strong></td>
            <td>
                <a href="#" editable-number="model.serviceCharges" e-min="0" e-step="100" buttons="no" blur="submit" class="text-right" e-class="text-right">{{model.serviceCharges | number}}
                </a>
            </td>
            <td class="hidden-print"></td>
        </tr>
        <tr>
            <td colspan="6" class="text-right"><strong class="form-control-static">Total units</strong></td>
            <td class="text-center">
                <span class="form-control-static">{{totalAmount | number}}</span>
            </td>
            <td class="text-right"><strong class="form-control-static">SubTotal</strong></td>
            <td class="text-right">
                <span class="form-control-static">{{totalPrice | number}}</span>
            </td>
            <td class="hidden-print"></td>
        </tr>
        <tr class="hidden-print" style="display: none;">
            <td colspan="8" class="text-right"><strong class="form-control-static">Tax</strong></td>
            <td>
                <a href="#" editable-number="model.tax" e-min="0" e-step="1" buttons="no" blur="submit" class="text-right" e-class="text-right">{{model.tax | number}}%
                </a>
            </td>
            <td class="hidden-print"></td>
        </tr>

        <tr>
            <td colspan="6" class="text-right"><strong class="form-control-static"></strong></td>
            <td class="text-center">
                <a href="#" editable-number="model.vat" e-min="0" e-step="1" buttons="no" blur="submit" class="text-right" e-class="text-right">{{model.vat | number:2}}%
                </a>
            </td>
            <td class="text-right"><strong class="form-control-static">VAT</strong></td>
            <td class="text-right">
                <span class="form-control-static">{{totalVat | number}}</span>
            </td>
            <td class="hidden-print"></td>
        </tr>


        <tr>
            <td colspan="8" class="text-right"><strong class="form-control-static grand-total">Total(VND)</strong></td>
            <td class="text-right">
                <strong class="form-control-static">{{grandTotalItems | number:0}}</strong>
            </td>
            <td class="hidden-print"></td>
        </tr>
        <tr>
            <td colspan="6" class="text-right"><strong class="form-control-static">Exchange rate USD</strong></td>
            <td class="text-center">
                <a class="exchange-rate" href="#" editable-number="model.exchangeRate" e-min="0" e-step="10" buttons="no" blur="submit">{{model.exchangeRate | number}}</a>
            </td>
            <td class="text-right"><strong class="form-control-static grand-total">Total(USD)</strong></td>
            <td>
                <a href="#" editable-number="model.grandTotal" e-min="0" e-step="1" buttons="no" blur="submit" class="text-right" e-class="text-right">{{grandTotal | number}}
                </a>
            </td>
            <td class="hidden-print"></td>
        </tr>
        <tr>
            <td colspan="9" class="text-left">

                <div class="col-xs-3" style="white-space: nowrap;">
                    <label>Calibration Schedule Date:</label>
                </div>
                <div class="col-xs-4">
                    <p e-datepicker-popup="dd/MMM/yyyy" editable-bsdate="model.calibrationDate" buttons="no" blur="submit">{{model.calibrationDate | date: 'dd/MMM/yyyy'}}</p>
                </div>
            </td>
            <td class="hidden-print"></td>
        </tr>
        <tr>
            <td colspan="9" class="text-left">
                <div class="col-xs-3">
                    <label>Notes:</label>
                </div>
                <div class="col-xs-8">
                    <span editable-text="model.note" buttons="no" blur="submit">{{model.note}}</span>
                </div>
            </td>
            <td class="hidden-print"></td>
        </tr>

        <tr class="hidden-print">
            <td colspan="8" class="text-left">

                <div class="col-xs-3" style="white-space: nowrap;">
                    <label>Sales Manager:</label>
                </div>
                <div class="col-xs-3">
                    
                    <strong class="form-control-static grand-total" ng-if="model.showFullName && !model.managerId">{{user.fullName}}</strong>
                    <strong class="form-control-static grand-total" ng-if="model.showFullName && model.managerId">{{model.manager.fullName}}</strong>

                </div>
                <div class="col-xs-3 text-left">
                    <input type="checkbox" ng-click="model.showFullName=!model.showFullName;" ng-model="model.showFullName" class="hidden-print" has-role="Admin,Management(BGD),SalesManager">
                </div>
            </td>
        </tr>

        <tr>
            <td colspan="9"></td>
        </tr>
    </tbody>
</table>

<div class="hidden-print">
    <div class="row">
        <div class="col-xs-3">
            <label>Status:</label>
        </div>
        <div class="col-xs-3">
            <a href="#" e-ng-options="s.value as s.text for s in status" editable-select="model.status" buttons="no" blur="submit" e-name="status">{{showStatus(model.status)}}
            </a>
        </div>
        <div class="col-xs-3" ng-if="model.status == 4">
            <label>Invoice date:</label>
        </div>
        <div class="col-xs-3" ng-if="model.status == 4">
            <a href="#" e-datepicker-popup="dd/MMM/yyyy" e-class="form-control" editable-bsdate="model.invoiceDate" buttons="no" blur="submit">{{model.invoiceDate | date: 'dd/MMM/yyyy'}}</a>
        </div>
    </div>
</div>
<div ng-include="'Scripts/app/views/_partials/po-footer.html'"></div>

<!--<page-footer page="1" standard="PO-230.2 – Form Date: Jan/2014"></page-footer>-->

<nav class="navbar navbar-default navbar-fixed-bottom navbar-inverse" role="navigation">
    <div class="container">
        <button class="btn btn-info navbar-btn" ng-click="back()">Back</button>
        <button class="btn btn-warning navbar-btn pull-right" has-access="PODelete" busy-click="remove(model)" success="Deleted successfully" ng-show="model.id != undefined">Delete</button>
        <button class="btn btn-info navbar-btn" has-access="POEdit" ng-show="model.id != undefined" busy-click="update(model)" success="Updated successfully">Update</button>
        <button class="btn btn-info navbar-btn" has-access="POCreate" ng-hide="model.id != undefined" busy-click="save(model)" success="Created successfully">Save</button>
        <button class="btn btn-info navbar-btn" ng-show="model.id != undefined" ng-click="doPrint()"><i class="glyphicon glyphicon-print"></i>Print</button>
        <button class="btn btn-primary navbar-btn" has-access="POCreate" ng-if="model.id != undefined" busy-click="createWO(model.id)">Create WO</button>
    </div>
</nav>
